<template>
  <div v-if="show" class="module_share_button_fixed" :style="{'right': right + 'px', 'bottom': bottom + 'px'}">
    <template v-for="(icon, index) in iconLink">
      <a @click="openConcat(icon, index)" class="svgIcon" :title="icon.word" :key="icon.icon">
        <i class="iconfont icon-item" :class="icon.icon" :style="{'color': icon.color}" ></i>
        <!-- <svg class="svgNormal" :style="{'width': icon.size}">
          <use :xlink:href="'#'+icon.icon"></use>
        </svg> -->
        <!-- <svg class="svgHover" :style="{'width': icon.size}">
          <use :xlink:href="'#'+icon.iconHover"></use>
        </svg> -->
      </a>
    </template>
  </div>
</template>

<script>
import { productShareNumFunc } from '@/utils/kanban.js'
export default {
  props: {
    show: {
      type: Boolean,
      default() {
        return true
      }
    },
    right: {
      type: [Number, String],
      default: 30
    },
    bottom: {
      type: [Number, String],
      default: 192
    },
    product: {
      type: Object,
      default() {
        return {
          title: ''
        }
      }
    }
  },
  data() {
    return {
      iconLink: [
        {icon:'icon-Facebook1_normal', iconHover: 'icon-Facebook1_hover', word:'Facebook', url:'https://www.facebook.com/sharer/sharer.php?u=', color: '#1877F2'},
        {icon:'icon-Twitter1_normal', iconHover: 'icon-Twitter1_hover', word:'Twitter', url:'https://twitter.com/intent/tweet?text=', color: '#1CA1F2' },
        {icon:'icon-Message1_normal', iconHover: 'icon-Message1_hover', word:'Share on Email', url:'mailto:?subject=', color: '#FEBD69'},
        {icon:'icon-Link1_normal', iconHover: 'icon-Link1_hover', word:'Copy Link to Clipboard', url:'copy'},
        // {icon:'icon-Top1_normal1', iconHover: 'icon-Top1_normal1', word:'', url:'', size: 32}
      ],
    }
  },
  methods: {
    openConcat (icon, index){
      let last = this.iconLink.length === index + 1
      this.$emit('toTop', index, last)
      let that = this
      let url = icon.url
      let location = window.location.href
      let isCopy = url.indexOf('copy') > -1
      let share_way = ''
      if(url) { // 分享按钮
        if(url.indexOf('facebook') > -1){
          url += location + '&quote=' + this.product.title
          share_way = 'Facebook'
        } else if (url.indexOf('twitter') > -1){
          url+= this.product.title + '&url=' + location
          share_way = 'Twitter'
        } else if(url.indexOf('mailto') > -1) {
          url+= this.product.title + '&body=' + location
          share_way = 'Email'
        } else if (isCopy){
          url = location
          share_way = 'Link'
        } 
        if(isCopy){
          this.$copyText(url).then(function () {
            that.$message.success('Link Copied')
          }, function () {
            that.$message.success('Link not copy')
          })
        }else {
          window.open(url)
        }
        productShareNumFunc(share_way, this.product.title)
      } else{
        // 回到顶部
        window.scrollTo({
          top: 0,
          behavior: 'smooth'
        })
      }
    },
  }
}
</script>

<style lang="scss">
.module_share_button_fixed{
  display: block;
  position: fixed;
  right: 10px;
  bottom: 120px;
  // border-radius: 16px  0px  0px  16px  ;
  // background-color: #FFFFFF;
  z-index: 100;
  // width: 64px;
  text-align: center;
  // box-shadow: -4px 0 8px rgba(54, 52, 52, 0.08);
  // padding: 0 16px;
  a{
    display: block;
    margin-top: 16px;
    font-size: 0;
    position: relative;
    cursor: pointer;
    background: #fff;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid #eaeaea;
    line-height: 56px;
    text-align: center;

    .icon-item {
      font-size: 32px;
    }

    &:hover {
      border-color: #A5AF99;
      background: #A5AF99;
      color: white;

      .icon-item {
        color: white !important;
      }
    }
    svg{ 
      width: 52px;
      height: 52px;
    }
    // &:hover{
    //   .svgHover{opacity: 1;}
    //   .svgNormal{opacity: 0;}
    // }
    // .svgHover{opacity: 0;position: absolute;left: 0;top: 0;}
    // .svgNormal{opacity: 1; }
    &:last-of-type{
      margin-bottom: 32px;
    }
  }
}
@media screen and (max-width: 768px) {
  .module_share_button_fixed {
    display: none;
  }
}
</style>